<div class="file" :class="[versionsActive && isCode ? 'version-active' : '']">

    <!-- Versions -->
    <versions :file="content" :content="content.versions" v-show="versionsActive && isCode"></versions>

    <!-- Viewer / Code -->
    <viewer :differences-active="differencesActive" v-if="isCode"></viewer>

    <!-- Preview image no server -->
    <div class="preview" v-if="isImage && !serverConfig.server">
        <a :href="downloadUrl" class="inner" download>
            <img :src="downloadUrl">
        </a>
    </div>

    <!-- Can't read image server -->
    <div class="cant-read" v-if="isImage && serverConfig.server">
        <illustration name="sad-robot"></illustration>
        <div class="text">
            Sorry, preview isn't available in server mode
        </div>
    </div>

    <!-- Can't read -->
    <div class="cant-read" v-if="!isCode && !isImage">
        <illustration name="sad-robot"></illustration>
        <div class="text">
            Sorry, I can't read this file.
            <div v-if="!serverConfig.server">
                But you can <a :href="downloadUrl" download class="download">download it</a>.
            </div>
        </div>
    </div>

    <!-- Header -->
    <header>

        <div class="path"><span class="directory">{{ content.path.directory }}/</span><span class="name">{{ content.name }}</span></div>

        <a class="versions-toggle" :class="[versionsActive ? 'active' : '']" href="#" @click.prevent="onVersionsClick" v-if="isCode">
            <img class="icon default" src="../../../static/svg/versions.svg" alt="">
            <img class="icon hover" src="../../../static/svg/versions-hover.svg" alt="">
            <tooltip position="bottom-right">Toggle the revision history</tooltip>
        </a>

        <a class="differences-toggle" :class="[differencesActive ? 'active' : '']" href="#" @click.prevent="onDifferencesClick" v-if="isCode">
            <img class="icon default" src="../../../static/svg/differences.svg" alt="">
            <img class="icon hover" src="../../../static/svg/differences-hover.svg" alt="">
            <tooltip position="bottom-right">Toggle the line-by-line differences</tooltip>
        </a>

        <a class="copy" :class="[copied ? 'active' : '']" href="#" @click.prevent="onCopyClick" @mouseleave="onCopyMouseleave" v-if="isCode">
            <img class="icon default" src="../../../static/svg/copy.svg" alt="">
            <img class="icon hover" src="../../../static/svg/copy-hover.svg" alt="">
            <tooltip position="bottom">Copy to clipboard</tooltip>
        </a>

        <a class="download" :href="downloadDataUri" :download="content.name">
            <img class="icon default" src="../../../static/svg/download.svg" alt="">
            <img class="icon hover" src="../../../static/svg/download-hover.svg" alt="">
            <tooltip position="bottom-left">Download this version of the file</tooltip>
        </a>

    </header>

</div>